<!DOCTYPE HTML>
<html>

<head>
    <title> 详情页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div class="container">
    <div class="detail-page span24">
        <div class="detail-page-title">
            <h4>订单详情
                <button type="button" id="user-list-btn" class="pull-right jx-btn ">返回</button>
            </h4>

        </div>
        <div class="detail-section">
            <div class="row detail-row">
                <div class="span24">
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td colspan="2">基本信息</td>
                        </thead>
                        <tr>
                            <td width="150">
                                <label class="pull-right">订单号：</label>
                            </td>
                            <td>
                                6080240000608
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label class="pull-right">订单状态：</label>
                            </td>
                            <td>
                                待支付
                                <button type="button" class="ml-10 pull-right button button-primary">撤销订单</button>
                                <button type="button" id="logisticsbtnShow" class="pull-right button button-primary">
                                    转账确认
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">支付时间：</label>
                            </td>
                            <td>
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">发货时间：</label>
                            </td>
                            <td>
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">撤消时间：</label>
                            </td>
                            <td>
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">订单备注：</label>
                            </td>
                            <td>
                                <button type="button" id="remarksbtnShow" class="pull-right button button-primary">备注
                                </button>
                            </td>
                        </tr>
                    </table>
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td colspan="2">
                            激想备注
                        </td>
                        </thead>
                        <tr>
                            <td width="150">
                                <label class="pull-right">备注：</label>
                            </td>
                            <td></td>
                        </tr>
                    </table>
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td colspan="4">
                            订单类型
                        </td>
                        </thead>
                        <tr>
                            <td width="150">
                                <label class="pull-right">订单类型：</label>
                            </td>
                            <td> 采购</td>
                            <td width="150">
                                <label class="pull-right">自定义订单号：</label>
                            </td>
                            <td>
                                <button id="ordernumberbtnShow" type="button" class="pull-right button button-primary">
                                    编辑自定义订单号
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">下单渠道：</label>
                            </td>
                            <td colspan="3"> 触摸屏下单</td>
                        </tr>
                    </table>
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td colspan="4"> 供货商信息</td>
                        </thead>
                        <tr>
                            <td width="150">
                                <label class="pull-right">供应商：</label>
                            </td>
                            <td> 锐力体育</td>
                            <td width="150">
                                <label class="pull-right">仓库地址：</label>
                            </td>
                            <td> 上海二仓</td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">供应商编码：</label>
                            </td>
                            <td> J1980319211</td>
                            <td width="150">
                                <label class="pull-right">库存管理方式：</label>
                            </td>
                            <td> 激想维护</td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">自定义仓库编码：</label>
                            </td>
                            <td> J1980319211</td>
                            <td width="150">
                                <label class="pull-right">激想仓库编码：</label>
                            </td>
                            <td> 017</td>
                        </tr>
                    </table>
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td colspan="4"> 下单用户信息</td>
                        </thead>
                        <tr>
                            <td width="150">
                                <label class="pull-right">下单用户ID：</label>
                            </td>
                            <td>
                                4151451
                            </td>
                            <td width="150">
                                <label class="pull-right">下单帐号：</label>
                            </td>
                            <td>
                                15900684377
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">下单用户类型：</label>
                            </td>
                            <td>
                                企业
                            </td>
                            <td width="150">
                                <label class="pull-right">用户等级：</label>
                            </td>
                            <td>
                                F2
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">下单者名称：</label>
                            </td>
                            <td></td>
                            <td width="150">
                                <label class="pull-right">下单企业名称：
                                </label>
                            </td>
                            <td> 上海激想体育文化股份有限公司</td>
                        </tr>
                    </table>
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td colspan="4"> 收货信息
                            <button id="addressbtnShow" type="button" class="pull-right button button-primary">编辑
                            </button>
                        </td>
                        </thead>
                        <tr>
                            <td width="150">
                                <label class="pull-right">收货人：</label>
                            </td>
                            <td> 张三
                            </td>
                            <td width="150">
                                <label class="pull-right">配送物流：</label>
                            </td>
                            <td> 上海二仓</td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">省市区：</label>
                            </td>
                            <td> 河南省周口市庆丰区</td>
                            <td width="150">
                                <label class="pull-right">运单号：</label>
                            </td>
                            <td> 0173423425</td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">详细地址：</label>
                            </td>
                            <td> 庆丰东路1号</td>
                            <td width="150">
                                <label class="pull-right">邮编：</label>
                            </td>
                            <td> 200231</td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">联系电话：</label>
                            </td>
                            <td> 0371-68101625</td>
                            <td width="150">
                                <label class="pull-right">手机：</label>
                            </td>
                            <td> 18516230495</td>
                        </tr>
                    </table>
                    <!-- 表格 start-->
                    <div>
                        <div class="grid-header">商品信息</div>
                        <div id="grid"></div>
                    </div>
                    <!-- 表格 end-->
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td colspan="4">
                            订单金额信息
                        </td>
                        </thead>
                        <tr>
                            <td width="150">
                                <label class="pull-right">订单应付款：</label>
                            </td>
                            <td> 23,395.00
                            </td>
                            <td width="150">
                                <label class="pull-right">订单已付金额：</label>
                            </td>
                            <td> 0.00</td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">折后商品总额：</label>
                            </td>
                            <td> 18,375.00 [会员折扣价总计]</td>
                            <td width="150">
                                <label class="pull-right">运费：</label>
                            </td>
                            <td> 20.00
                                <button id="freightbtnShow" type="button" class="pull-right button button-primary">编辑
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">商品总额：</label>
                            </td>
                            <td>
                                24,375.00 [供货价总计]
                            </td>
                            <td width="150">
                                <label class="pull-right">人工减免：</label>
                            </td>
                            <td> 0.00［抵扣折后商品总额］
                                <button id="discountbtnShow" type="button" class="pull-right button button-primary">减免
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">商品总数量：</label>
                            </td>
                            <td>10</td>
                            <td width="150">
                                <label class="pull-right">支付类型：</label>
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right"> </label>
                            </td>
                            <td></td>
                            <td width="150">
                                <label class="pull-right">支付时间：
                                </label>
                            </td>
                            <td></td>
                        </tr>
                    </table>
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td colspan="4">
                            订单支付信息
                        </td>
                        </thead>
                        <tr>
                            <td width="150">
                                <label class="pull-right">支付通道：</label>
                            </td>
                            <td> 支付宝
                            </td>
                            <td width="150">
                                <label class="pull-right">商家支付号：</label>
                            </td>
                            <td> 74198747651947189475</td>
                        </tr>
                    </table>
                    <div class="grid-header">
                        操作信息
                    </div>
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td>
                            操作平台
                        </td>
                        <td>
                            操作帐号
                        </td>
                        <td>
                            操作名称
                        </td>
                        <td>
                            操作时间
                        </td>
                        </thead>
                        <tr>
                            <td>
                                平台
                            </td>
                            <td> RL001
                            </td>
                            <td>
                                [激想备注］备注
                            </td>
                            <td> 2016-10-11 14:50:31</td>
                        </tr>
                        <tr>
                            <td>
                                平台
                            </td>
                            <td> RL001
                            </td>
                            <td>
                                [激想备注］备注
                            </td>
                            <td> 2016-10-11 14:50:31</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 初始隐藏 logisticsDialog内容 -->
<div id="logistics" class="hide">
    <form id="logisticsform" class="form-horizontal">
        <div class="row">
            <div class="control-group span12 offset2">
                <label class="control-label">
                    <s>*</s> 物流公司：</label>
                <div class="controls">
                    <select name="" data-rules="{required:true}" class="input-normal">
                        <option value="">请选择</option>
                        <option value="1">圆通</option>
                        <option value="2">申通</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span12 offset2">
                <label class="control-label">
                    物运单号：</label>
                <div class="controls">
                    <input type="text" data-rules="{required:true,number:true}" class="input-normal control-text">
                </div>
            </div>
        </div>
    </form>
</div>
<!-- 初始隐藏 dialog内容 -->
<div id="content" class="hide">
    <form class="form-horizontal">
        <div class="row">
            <div class="control-group span8">
                <label class="control-label">货号：</label>
                <div class="controls">
                        <span class="control-text">
                            B33188</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span8">
                <label class="control-label">尺码：</label>
                <div class="controls">
                        <span class="control-text">
                          6.5</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span8">
                <label class="control-label">条形码：</label>
                <div class="controls">
                        <span class="control-text">
                         4713476175917511</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span12">
                <label class="control-label">数量：</label>
                <div class="controls">
                    <div class="unit-detail-amount-control">
                        <div class="button-group">
                            <span class="button minus" style="cursor:pointer;">-</span>
                            <input type="text" name="g" class="input-small input-group">
                            <span class="button plus" style="cursor:pointer;">+</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <span class="grey span8 offset3">注：编辑数量不得超过已下单数量</span>
        </div>
    </form>
</div>
<script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/bootstrap.js"></script>
<script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
<script type="text/javascript" src="../../../assets/js/config-min.js"></script>
<script type="text/javascript">
    BUI.use('common/page');
</script>
<script type="text/javascript">
    BUI.use(['bui/grid', 'bui/data'], function (Grid, Data) {
        var Grid = Grid,
            Store = Data.Store,
            columns = [{
                title: '商品货号',
                dataIndex: 'a',
                elCls: 'center', //居中
                width: 100
            }, {
                title: '商品品牌',
                dataIndex: 'b',
                elCls: 'center', //居中
                width: 100
            }, {
                title: '品类',
                elCls: 'center',
                dataIndex: 'c',
                width: 100
            }, {
                title: '商品名称',
                elCls: 'center',
                dataIndex: 'd',
                width: 200
            }, {
                title: '商品等级',
                elCls: 'center',
                dataIndex: 'r',
                width: 80
            }, {
                title: '商品系列',
                elCls: 'center',
                dataIndex: 's',
                width: 100
            }, {
                title: '颜色',
                elCls: 'center',
                dataIndex: 'e',
                width: 100
            }, {
                title: '规格',
                elCls: 'center',
                dataIndex: 'f',
                width: 100
            }, {
                title: '条形码',
                elCls: 'center',
                dataIndex: 'h',
                width: 100
            }, {

                title: '数量',
                elCls: 'center',
                dataIndex: 'g',
                width: 100
            }, {

                title: '供应价',
                elCls: 'center',
                dataIndex: 'i',
                width: 100
            }, {

                title: '折扣规则',
                elCls: 'center',
                dataIndex: 'j',
                width: 50
            }, {

                title: '会员折扣价',
                elCls: 'center',
                dataIndex: 'k',
                width: 100
            }, {

                title: '小计',
                elCls: 'center',
                dataIndex: 'l',
                width: 100
            }, {

                title: '售后状态',
                elCls: 'center',
                dataIndex: 'm',
                width: 100
            }, {
                title: '操作',
                elCls: 'center',
                dataIndex: 'p',
                width: 100,
                renderer: function (value, obj) {
                    return '<span class="grid-command btn-edit"> [ 编辑 ]</span><span class="grid-command btn-del"> [ 删除 ]</span>';
                }
            }],
            data = [{
                id: 1,
                a: 'Adidas',
                b: '服饰',
                c: '鞋子',
                d: 'ESSENTIAL STAR 2',
                e: '训练鞋',
                f: '成人',
                g: '2015',
                h: '男款',
                i: '699.00',
                j: '参与',
                k: ' 453.00',
                l: '453.00',
                m: '',
                r: 'A',
                s: '运动系列'
            }, {
                id: 2,
                a: 'Adidas',
                b: '服饰',
                c: '鞋子',
                d: 'ESSENTIAL STAR 2',
                e: '训练鞋',
                f: '成人',
                g: '2015',
                h: '男款',
                i: '699.00',
                j: '参与',
                k: ' 453.00',
                l: '453.00',
                m: '',
                r: 'A',
                s: '运动系列'


            }];

        //初始化数据 
        var isAddRemote = false,
            editing = new Grid.Plugins.DialogEditing({
                contentId: 'content', //设置隐藏的Dialog内容
                triggerCls: 'btn-edit', //触发显示Dialog的样式
                editor: {
                    title: '商品数量'
                }
            }),
            store = new Store({ //初始化数据
                data: data,
                autoLoad: true, //自动加载数据
                pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
                render: '#grid',
                elCls: 'small-bui-grid-table mb-20',
                columns: columns,
                loadMask: true, //加载数据时显示屏蔽层

                bbar: {
                    // pagingBar:表明包含分页栏
                    pagingBar: true
                },
                plugins: [editing], //插件
                store: store
            });

        grid.render();

        //点击操作
        grid.on('itemclick', function (ev) {
            var sender = $(ev.domTarget),
                itemEl = $(ev.element),
                item = ev.item;

            if (sender.hasClass('btn-del')) { //点击删除操作
                delFunction(item, itemEl);

            }

        });

        //没有多选插件，删除选中的记录
        function delFunction(item, itemEl) {
            BUI.Message.Confirm('确认删除记录？', function () {

                store.remove(item);
            }, 'question');
        }

        //为数量调整按钮、删除添加单击事件


        $(".unit-detail-amount-control").bind("click keyup", function (event) {
            var input = $(this).find(":text");
            var val = parseInt($(input).val());
            if (isNaN(val) || (val < 0)) {
                val = 0;
                /* input.val(val);*/
            }
            if ($(event.target || window.event.srcElement).hasClass("minus")) {
                if (val > 0) val--;
                /* input.val(val);*/
            } else if ($(event.target || window.event.srcElement).hasClass("plus")) {
                val++;

            }
            input.val(val);
        });

    });
</script>

<body>

</html>
